<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fe8</title>
    <style>
        .done {
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="todo-main">
    <div class="todo-form">
        <input id="id-input-todo" type="text">
        <button id="id-button-add" type="button">Add</button>
    </div>

    <div id="id-div-container">
        <div class="todo-cell">
            <button class="todo-done">完成</button>
            <button class="todo-delete">删除</button>
            <span contenteditable="true">上课</span>
        </div>
    </div>
</div>
<script>
    var log = function () {
        console.log.apply(console, arguments)
    }
    var addButton = document.querySelector('#id-button-add')
    addButton.addEventListener('click', function () {
        var todoInput = document.querySelector('#id-input-todo')
        var todo = todoInput.value
        var todoContainer = document.querySelector('#id-div-container')
        var t = templateTodo(todo)
        todoContainer.insertAdjacentHTML('beforeend', t)
    })
    //模板字符串
    var templateTodo = function (todo) {
        var t = `
        <div class="todo-cell">
            <button class="todo-done">完成</button>
            <button class="todo-delete">删除</button>
            <span contenteditable="true">上课</span>
        </div>
        `
        return t
    }

    var todoContainer = document.querySelector('#id-div-container')

    todoContainer.addEventListener('click', function (event) {
        log('container click', event, event.target)
        var target = event.target
        if (target.classList.contains('todo-done')) {
            log('done')
            var todoDiv = target.parentElement
            toggleClass(todoDiv, 'done')
        } else if (target.classList.contains('todo-delete')) {
            log('delete')
            var todoDiv = target.parentElement
            todoDiv.remove()
        }
    })
    //    todo div开关一个状态 class
    var toggleClass = function (element, className) {
        if (element.classList.contains(className)) {
            element.classList.remove(className)
        } else {
            element.classList.add(className)
        }
    }


    //本地存储：localStorage,可以用来存储字符串数据，在浏览器关闭后仍然可以用
    localStorage.name = 'juran'
    //localStorage存储String,todo存储array中：存取：array转换string；读取：string转换array
    var s = JSON.stringify([1, 2, 3, 4])
    log('序列化的字符串', typeof s, s)
    var a = JSON.parse(s)
    log('反序列化的数组', typeof a, a)



</script>
</body>
</html>